<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-02-07 10:51:34
 * @FilePath: \ylwl\src\demos\tree.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div style="width: 600px; background: #f1f1f1; padding: 0 10px">
    <div>树形选择器</div>
    <M-Tree v-model="treevalue" :prop="cprop" :checkable="true" :data="demo">
      <template #labelAfter="scope">
        <el-tag class="ml-2" :type="scope.level == 1 ? 'success' : 'danger'">{{
          scope.label
        }}</el-tag>
      </template>
      <template #iconCenter="item">
        <svg
          v-if="item.all"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4160"
          width="12"
          height="12"
        >
          <path d="M64 320l448 448 448-448z" fill="#8C92A4" p-id="4161"></path>
        </svg>
        <svg
          v-else
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4361"
          width="12"
          height="12"
        >
          <path d="M256 64l448 448-448 448z" fill="#8C92A4" p-id="4362"></path>
        </svg>
      </template>
    </M-Tree>
    <h4>{{ treevalue }}</h4>
    <el-button type="primary" @click="test">初始值设置</el-button>
    <!-- <el-button @click="reset">ref调用测试</el-button>  -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, Ref, h } from 'vue'
import { ElTag } from 'element-plus'
// import utils from '@@/utils/index'
defineOptions({
  name: 'Demo1'
})
const treevalue = ref(['2'])
const cprop = ref({
  // labelAfter: (scope: any) => {
  //   return h(
  //     ElTag,
  //     {
  //       prod: {
  //         type: `${scope.level == 1 ? 'success' : 'danger'}`
  //       }
  //     },
  //     scope.label + 123
  //   )
  // },
  color: '#33a316',
  keyName: 'id'
})
interface FormType {
  citys: string | number | Array<any>
}
//士大夫撒旦
const demo = ref([
  {
    label: '一级 1',
    level: 1,
    id: 1,
    children: [
      {
        label: '二级 1-1',
        level: 2,
        id: '1_1',
        children: [
          {
            label: '三级 1-1-1',
            level: 3,
            id: '1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: '一级 2',
    level: 1,
    open: true, // 新增
    disableToggle: false, // 新增
    disabled: false, // 新增
    id: '2',
    children: [
      {
        label: '二级 2-1',
        level: 2,
        id: '2-1',
        open: true, // 新
        children: [
          {
            label: '三级 2-1-1',
            level: 3,
            id: '2-1-3'
          }
        ]
      },
      {
        label: '二级 2-2',
        level: 2,
        id: '2-2',
        open: true, // 新
        children: [
          {
            label: '三级 2-2-4',
            level: 3,
            id: '2-3-4'
          }
        ]
      }
    ]
  }
])

const test = () => {
  treevalue.value = ['2-1', '2', '2-2', '2-1-3', '2-3-4']
}

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
